<template>
    <view class="login-wrapper">
        <view class="title">抱朴园后台管理</view>
        <view class="login-content">
            <u-form ref="form" :model="loginForm" :rules="rules" :hide-required-mark="true">
                <u-form-item :label-width="80" label="用户名:" prop="username">
                    <u-input v-model="loginForm.username" placeholder="请输入用户名" />
                </u-form-item>
                <u-form-item :label-width="80" label="密码:" prop="password">
                    <u-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
                </u-form-item>
                <u-form-item>
                    <u-button type="primary" @click="handleLogin" class="login-button" loadingText="登录中..."
                        :loading="loading">
                        登录
                    </u-button>
                </u-form-item>
            </u-form>
        </view>
    </view>
</template>
  
<script>
export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            loading: false,
        };
    },
    methods: {
        handleLogin() {
            this.$refs.form.validate().then((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$request.request({
                        url: 'passport/login',
                        method: 'POST',
                        data: {
                            password: this.loginForm.password,
                            username: this.loginForm.username
                        }
                    }).then(res => {
                        uni.showToast({
                            title: '登录成功',
                            icon: 'none'
                        })
                        uni.setStorageSync("token", res.data.token)
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/index'
                            })
                        }, 1000)
                    }).finally(() => {
                        this.loading = false;
                    })

                } else {
                    console.log('验证失败')
                }
            })
        },
    },
};
</script>
  
<style lang="scss" scoped>
.login-wrapper {
    display: flex;
    flex-direction: column;
    padding: 60rpx;

    .title {
        text-align: center;
        font-weight: 700;
        font-size: 18px;
        margin: 40rpx 0;
        margin-top: 200rpx;
    }

    .login-navbar {
        background-color: #ffffff;
    }

    .login-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-button {
        width: 100%;
        margin-top: 20px;
    }
}
</style>
  